<template>
  <v-container>
    <v-toolbar flat color="white">
      <v-toolbar-title>计时</v-toolbar-title>
    </v-toolbar>
    <v-divider></v-divider>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      :rows-per-page-items="[5]"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.serialno }}</td>
        <td class="text-xs-left">{{ props.item.cam }}</td>
        <td class="text-xs-left">{{ props.item.pno }}</td>
        <td class="text-xs-left">
          <clock :kid="props.item.cameralno" @update-time="calcFee"></clock>  
        </td>
        <td class="text-xs-left">{{ props.item.realtimefee }}</td>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
import Clocker from '../extras/clocker'

export default {
  components: {
    clock: Clocker
  },
  data() {
    return {
      headers: [
        {
          text: "序号",
          align: "left",
          sortable: true,
          value: "serialno"
        },
        { text: "摄像头编号", value: "cam" },
        { text: "车位号", value: "pno" },
        { text: "计时", value: "timecount", sortable: false },
        { text: "实时费用", value: "realtimefee", sortable: false }
      ],
      desserts: [
        {
          serialno: "1",
          cam: 159,
          pno: 2,
          realtimefee: 0
        }
      ]
    };
  },

  methods: {
    calcFee([time, kid]) {
      let t = Math.ceil(time/3600)
      this.desserts[0].realtimefee = t*8
    }
  }
};
</script>
